<h2>Cards</h2>

<div fxLayout="row" fxLayoutGap="10px" fxLayout.xs="column">
  <div fxFlex.xs="0 0 calc(100%)" fxFlex.gt-xs="0 0 calc(37% -10px)">
    <h3>Available</h3>
    <div
      cdkDropList
      #todoList="cdkDropList"
      [cdkDropListData]="available"
      [cdkDropListConnectedTo]="[doneList]"
      class="job-list"
      (cdkDropListDropped)="checkAndDrop($event)"
      [cdkDropListEnterPredicate]="removePredicate.bind(this)"
      id="backlog"
    >
      <app-prestige-card
        cdkDrag
        class="job-box"
        [cdkDragData]="cardAv"
        *ngFor="let cardAv of available; trackBy: getCardId"
        [card]="cardAv"
      >
      </app-prestige-card>
    </div>
  </div>
  <div fxFlex.xs="0 0 calc(100%)" fxFlex.gt-xs="0 0 calc(37% -10px)">
    <h3>
      <span class="point-in-use">
        Card point in use:
        <span class="monospace"
          >{{ points }} /{{ ms.game.prestigeManager.maxCards }}</span
        >
      </span>
      Card in use: <span class="monospace">{{ inUse.length }}</span>
    </h3>
    <div
      cdkDropList
      #doneList="cdkDropList"
      [cdkDropListData]="inUse"
      [cdkDropListConnectedTo]="[todoList]"
      class="job-list"
      (cdkDropListDropped)="drop($event)"
      id="backlog"
      [cdkDropListEnterPredicate]="maxPredicate.bind(this)"
    >
      <app-prestige-card
        cdkDrag
        [cdkDragData]="cardUse"
        class="job-box"
        *ngFor="let cardUse of inUse; trackBy: getCardId"
        [card]="cardUse"
      >
      </app-prestige-card>
    </div>
  </div>
  <div fxFlex.xs="0 0 calc(100%)" fxFlex.gt-xs="0 0 calc(26% -10px)">
    <p>
      Gain one slot every {{ LEVEL_PER_CARD }} max level enemy. Slots never
      reset.
      <br />
      After confirmation cards will be locked until prestige (you can click
      'Confirm' only one time per prestige).
    </p>
    <button
      nzType="primary"
      nz-button
      (click)="confirm()"
      class="confirmButton"
      [disabled]="ms.game.prestigeManager.lockedCars"
    >
      <span>Confirm</span>
    </button>

    <div
      class="favourite-div"
      fxLayout="column"
      fxLayoutAlign="start start"
      fxLayoutGap="0.5rem"
    >
      <!-- Favourite Module -->
      <div *ngIf="favouriteModuleInUse">
        <label>Favourite module</label>
        <div>
          <nz-cascader
            fxFlex="1 1 0"
            class="module-select"
            name="Favourite module"
            nzPlaceHolder="Favourite module"
            [nzLabelRender]="renderTpl"
            [nzOptions]="nzOptions"
            [(ngModel)]="favouriteModuleUi"
            [nzOptionRender]="renderOptTpl"
            (ngModelChange)="onModuleChanges($event)"
          >
          </nz-cascader>

          <ng-template
            #renderTpl
            let-labels="labels"
            let-selectedOptions="selectedOptions"
          >
            <span
              *ngIf="selectedOptions"
              nz-typography
              [nzType]="
                selectedOptions[selectedOptions.length - 1]?.mod &&
                !selectedOptions[selectedOptions.length - 1]?.mod?.unlocked
                  ? 'warning'
                  : ''
              "
            >
              <i
                nz-icon
                [nzType]="
                  selectedOptions[selectedOptions.length - 1]?.mod?.shape
                "
              ></i>
              <span>
                {{ selectedOptions[selectedOptions.length - 1]?.label }}
              </span>
            </span>
          </ng-template>

          <ng-template #renderOptTpl let-option let-index="index">
            <span
              [nz-popover]="option?.mod"
              [nzPopoverTitle]="modTitleTemplate"
              [nzPopoverContent]="modTemplate"
              nzPopoverPlacement="right"
              [nzPopoverTrigger]="option?.mod ? 'hover' : 'null'"
              style="width: 100%"
              class="mod-options"
              nz-typography
              [nzType]="option?.mod && !option?.mod?.unlocked ? 'warning' : ''"
            >
              <i nz-icon [nzType]="option?.mod?.shape"></i>
              <span>
                {{ option.label }}
              </span>
            </span>

            <ng-template #modTitleTemplate>
              <i nz-icon [nzType]="option?.mod?.shape"></i>
              {{ option.label }}
            </ng-template>

            <ng-template #modTemplate>
              <div class="mod-info-container">
                <app-module-info [mod]="option?.mod"></app-module-info>
              </div>
            </ng-template>
          </ng-template>
        </div>
      </div>

      <div *ngIf="favouriteSpellInUse">
        <label>Favourite spell</label>
        <div>
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="Favourite spell"
            [(ngModel)]="ms.game.prestigeManager.favouriteSpell"
            [nzCustomTemplate]="spellLabel"
            class="spells-select"
          >
            <nz-option
              *ngFor="
                let spell of ms.game.computingManager.currentSpells;
                trackBy: getSpellId
              "
              nzCustomContent
              [nzLabel]="spell.name"
              [nzValue]="spell"
            >
              <i nz-icon [nzType]="spell.icon"></i> {{ spell.name }}
            </nz-option>
          </nz-select>
          <ng-template #spellLabel let-selected>
            <i nz-icon [nzType]="selected.nzValue.icon"></i>
            {{ selected.nzLabel }}
          </ng-template>
        </div>
      </div>
    </div>
  </div>
</div>
